<template>
	<view class="page-index">
		<!-- 位置区域弹出层 -->
		<uni-popup ref="regionPopup" type="bottom" class="uni-popup" :safe-area="false" @touchmove.stop.prevent="">
			<view class="typePopup">
				<view class="title-box">
					<view class=""></view>
					<view class="title">位置</view>
					<view class="confirm"><u-icon name="close" color="#000000" size="20" @click="close()"></u-icon></view>
				</view>
				<view class="content">
					<view class="item-box">
						<view :class="[item.id == form.areas_id ? 'selected' : 'item']" v-for="(item, index) in selectList.areas" :key="index" @click="regionClick(item)">{{ item.title }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 房源类型弹出层 -->
		<uni-popup ref="typePopup" type="bottom" class="uni-popup" :safe-area="false" @touchmove.stop.prevent="">
			<view class="typePopup">
				<view class="title-box">
					<view class=""></view>
					<view class="title">房源类型</view>
					<view class="confirm"><u-icon name="close" color="#000000" size="20" @click="close()"></u-icon></view>
				</view>
				<view class="content">
					<view class="title">出租类型</view>
					<view class="item-box">
						<view :class="[item.id == form.tentype_id ? 'selected' : 'item']" v-for="(item, index) in btnList" :key="index" @click="typeClick(item)" @touchmove.stop.prevent="">{{ item.title }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 租金范围弹出层 -->
		<uni-popup ref="rentPopup" type="bottom" class="uni-popup" :safe-area="false">
			<view class="typePopup">
				<view class="title-box">
					<view class=""></view>
					<view class="title">租金范围</view>
					<view class="confirm"><u-icon name="close" color="#000000" size="20" @click="close()"></u-icon></view>
				</view>
				<view class="content">
					<view class="item-box">
						<view :class="[item.id == form.rent_id ? 'selected' : 'item']" v-for="(item, index) in selectList.rent1" :key="index" @click="rentClick(item)" @touchmove.stop.prevent="">{{ item.title }}</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 筛选弹出层 -->
		<uni-popup ref="screenPopup" type="bottom" class="uni-popups" :safe-area="false" @touchmove.stop.prevent="">
			<scroll-view class="typePopup" scroll-y="true" style="padding: 32rpx 0 0;">
				<view class="title-box" style="padding: 0 40rpx;">
					<!-- 					<view class="">
					</view> -->
					<view class="title">筛选</view>
					<!-- 					<view class="confirm" @click="confirm()">
						确定
					</view> -->
				</view>
				<view class="content" style="padding: 0 40rpx 160rpx; ">
					<view class="title">户型</view>
					<view class="item-box">
						<view :class="[form.size_id.indexOf(item.id) > -1 ? 'selected' : 'item']" v-for="(item, index) in selectList.size" :key="index" @click="sizeClick(item)">{{ item.title }}</view>
					</view>
					<view class="title" style="margin-top: 32rpx;">房源特色（可多选）</view>
					<view class="item-box">
						<view :class="[form.configure_id.indexOf(item.id) > -1 ? 'selected' : 'item']" v-for="(item, index) in selectList.configure" :key="index" @click="screenClick(item)">{{ item.title }}</view>
					</view>
				</view>
			</scroll-view>
			<view class="position-box">
				<view class="box">
					<view class="Reset" @click="reset()">重置</view>
					<view class="enter" @click="confirm()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import * as index from '@/api/index.js';
export default {
	name: 'popup',
	data() {
		return {
			default: {
				id: 0,
				title: '不限'
			},
			form: {
				tentype_id: 0, //房屋类型ID
				areas_id: 0, //位置区域ID
				rent_id: 0, //租金范围ID
				configure_id: [0], //筛选ID数组
				page: 1,
				size_id: [0],
			},
			selectList: [],
			btnList: []
		};
	},
	mounted() {
		index.getTeneList().then(res => {
			console.log(res, 'resdata');
			this.btnList = res.data;
			this.btnList.unshift(this.default);
		});
		index.getSelect().then(res => {
			this.selectList = res.data;
			this.selectList.areas.unshift(this.default);
			this.selectList.tentype1.unshift(this.default);
			this.selectList.rent1.unshift(this.default);
			this.selectList.configure.unshift(this.default);
			this.selectList.size.unshift(this.default);
		});
		this.types();
	},
	methods: {
		types() {
			if (uni.getStorageSync('types')) {
				let type = uni.getStorageSync('types');
				this.typeClick(type);
				// uni.$emit('formSearch',this.form)
				// this.confirm()
			}
		},
		// 位置区域点击事件
		regionOpen() {
			this.$refs.regionPopup.open('bottom');
		},
		regionClick(item) {
			this.form.areas_id = item.id;
			uni.$emit('areass', item.title);
			this.confirm();
		},
		//房源类型点击事件
		typeOpen() {
			this.$refs.typePopup.open('bottom');
		},
		typeClick(item) {
			this.form.tentype_id = item.id;
			uni.$emit('tentypes', item.title);
			// this.form.type = item.type
			this.confirm();
		},
		//租金范围点击事件
		rentOpen() {
			this.$refs.rentPopup.open('bottom');
		},
		rentClick(item) {
			this.form.rent_id = item.id;
			uni.$emit('rents', item.title);
			this.confirm();
		},
		//筛选点击事件
		screenOpen() {
			this.$refs.screenPopup.open('bottom');
		},
		screenClick(item) {
			if (this.form.configure_id.indexOf(item.id) < 0) {
				this.form.configure_id.push(item.id);
				if (item.id == 0) {
					this.form.configure_id = [];
					this.form.configure_id.push(0);
					// this.title.screen = '已筛选'
				} else {
					this.removeByValue(this.form.configure_id, 0);
				}
			} else {
				this.removeByValue(this.form.configure_id, item.id);
			}
		},
		sizeClick(item) {
			if (this.form.size_id.indexOf(item.id) < 0) {
				this.form.size_id.push(item.id);
				if (item.id == 0) {
					this.form.size_id = [];
					this.form.size_id.push(0);
					// this.title.screen = '已筛选'
				} else {
					this.removeByValue(this.form.size_id, 0);
				}
			} else {
				this.removeByValue(this.form.size_id, item.id);
			}
		},
		removeByValue(arr, val) {
			for (var i = 0; i < arr.length; i++) {
				if (arr[i] == val) {
					arr.splice(i, 1);
					break;
				}
			}
		},
		close() {
			this.$refs.regionPopup.close();
			this.$refs.typePopup.close();
			this.$refs.rentPopup.close();
			this.$refs.screenPopup.close();
		},
		//点击确定
		confirm() {
			this.$refs.regionPopup.close();
			this.$refs.typePopup.close();
			this.$refs.rentPopup.close();
			this.$refs.screenPopup.close();
			uni.$emit('formSearch', this.form);
			// uni.$emit('title',this.titles)
		},
		reset() {
			this.form.size_id = [0];
			this.form.configure_id = [0];
		}
	}
};
</script>

<style scoped lang="scss">
.vue-ref {
	padding-bottom: 0 !important;
}

.page-index {
	.uni-popup {
		.typePopup {
			z-index: 1000000000000000000000000;
			height: 970rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 0 0;
			padding: 32rpx 40rpx 0;

			.title-box {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 700;
					color: #202020;
				}

				.confirm {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					color: #3c71ff;
				}
			}

			.item-box {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.item {
					margin-left: 15rpx;
					width: 204rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #f7f7f7;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					color: #333333;
					margin-top: 32rpx;
				}

				.selected {
					margin-left: 15rpx;
					width: 204rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #006fd0;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					color: #ffffff;
					margin-top: 32rpx;
				}
			}
		}
	}

	.uni-popups {
		position: relative;

		.position-box {
			position: absolute;
			bottom: 0;
			height: 146rpx;
			width: 100%;
			background: #ffffff;

			.box {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-around;
				padding-top: 10rpx;

				.Reset {
					height: 82rpx;
					width: 312rpx;
					text-align: center;
					line-height: 82rpx;
					color: #006fd0;
					border: 1rpx solid #006fd0;
					border-radius: 16rpx;
				}

				.enter {
					height: 82rpx;
					width: 312rpx;
					text-align: center;
					line-height: 82rpx;
					background: #006fd0;
					border-radius: 16rpx;
					color: #ffffff;
				}
			}
		}

		.typePopup {
			z-index: 1000000000000000000000000;
			height: 970rpx;
			background: #ffffff;
			border-radius: 40rpx 40rpx 0 0;
			padding: 32rpx 40rpx 0;

			.title-box {
				display: flex;
				justify-content: space-around;

				.title {
					font-size: 32rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 700;
					color: #202020;
				}

				.confirm {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					color: #3c71ff;
				}
			}

			.item-box {
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.item {
					margin-left: 15rpx;
					width: 204rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #f7f7f7;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					color: #333333;
					margin-top: 32rpx;
				}

				.selected {
					margin-left: 15rpx;
					width: 204rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					background: #006fd0;
					border-radius: 16rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					color: #ffffff;
					margin-top: 32rpx;
				}
			}
		}
	}
}
</style>
